<template>
    <div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="whole">
                    <el-table :data="tableData">
                        <el-table-column type="index" label="序号">
                        </el-table-column>
                        <el-table-column prop="problemTypes" label="问题类型">
                        </el-table-column>
                        <el-table-column prop="submitter" label="提交人">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别">
                        </el-table-column>
                        <el-table-column prop="contactNumber" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="faculty" label="所属院系">
                        </el-table-column>
                        <el-table-column prop="grade" label="年级">
                        </el-table-column>
                        <el-table-column prop="studentId" label="学号">
                        </el-table-column>
                        <el-table-column prop="submissionTime" label="提交时间">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="投诉" name="first">
                    <el-table :data="tableData">
                        <el-table-column type="index" label="序号">
                        </el-table-column>
                        <el-table-column prop="problemTypes" label="问题类型">
                        </el-table-column>
                        <el-table-column prop="submitter" label="提交人">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别">
                        </el-table-column>
                        <el-table-column prop="contactNumber" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="faculty" label="所属院系">
                        </el-table-column>
                        <el-table-column prop="grade" label="年级">
                        </el-table-column>
                        <el-table-column prop="studentId" label="学号">
                        </el-table-column>
                        <el-table-column prop="submissionTime" label="提交时间">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="建议" name="second">
                    <el-table :data="tableData">
                        <el-table-column type="index" label="序号">
                        </el-table-column>
                        <el-table-column prop="problemTypes" label="问题类型">
                        </el-table-column>
                        <el-table-column prop="submitter" label="提交人">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别">
                        </el-table-column>
                        <el-table-column prop="contactNumber" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="faculty" label="所属院系">
                        </el-table-column>
                        <el-table-column prop="grade" label="年级">
                        </el-table-column>
                        <el-table-column prop="studentId" label="学号">
                        </el-table-column>
                        <el-table-column prop="submissionTime" label="提交时间">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            activeName: 'whole',
            tableData: [{
                problemTypes: '投诉',
                submitter: '王小虎',
                sex: '男',
                contactNumber: '13856895689',
                faculty: '医学系',
                grade: '18级',
                studentId: '8784527875',
                submissionTime: '2024-04-14 15:15:24',
            }, {
                problemTypes: '2016-05-02',
                submitter: '王小虎',
                sex: '男',
                contactNumber: '13856895689',
                faculty: '医学系',
                grade: '18级',
                studentId: '8784527875',
                submissionTime: '2024-04-14 15:15:24',
            }, {
                problemTypes: '2016-05-02',
                submitter: '王小虎',
                sex: '男',
                contactNumber: '13856895689',
                faculty: '医学系',
                grade: '18级',
                studentId: '8784527875',
                submissionTime: '2024-04-14 15:15:24',
            }, {
                problemTypes: '2016-05-02',
                submitter: '王小虎',
                sex: '男',
                contactNumber: '13856895689',
                faculty: '医学系',
                grade: '18级',
                studentId: '8784527875',
                submissionTime: '2024-04-14 15:15:24',
            },]
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }

}
</script>

<style lang="less" scoped></style>